<template>
    <div class="login-container">
        <div class="form-left"></div>
        <div class="form-right">
            <el-card class="box-card">
                <div class="logo">
                    神机翻译平台
                </div>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="demo-ruleForm" :size="formSize"
                    status-icon>
                    <el-form-item prop="username">
                        <el-input v-model="ruleForm.username" placeholder="请输入账号" />
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="ruleForm.password" placeholder="请输入密码" />
                    </el-form-item>
                    <el-form-item style="margin-top: 50px;">
                        <el-button style="width: 100%;" type="primary" @click="submitForm(ruleFormRef)">
                            登录
                        </el-button>
                    </el-form-item>
                </el-form>
                <!-- <el-button type="text">忘记密码?</el-button> -->
            </el-card>
        </div>
    </div>
</template>

<script setup lang="ts">

import { reactive, ref } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useRouter } from 'vue-router';
let router = useRouter()
const formSize = ref('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    username: 'admin',
    password: '',

})

const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 6, max: 10, message: '长度至少6-10位', trigger: 'blur' },
    ],

})

const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            console.log('submit!')
            router.push({name:'home'})
        } else {
            console.log('error submit!', fields)
        }
    })
}


</script>

<style scoped lang="scss">
.login-container {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;


    &:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: linear-gradient(to right, rgba(220, 251, 220, 0.3), rgba(247, 204, 247, 0.4), rgba(220, 251, 220, 0.2));
        filter: blur(10px);
        z-index: -1;
    }

    .form-left {
        flex: 4;
        height: 100vh;
    }

    .form-right {
        flex: 2;

        .box-card {
            height: 500px;
            width: 70%;
            margin: 0 auto;
            padding: 0 5%;

            .logo {
                padding-top: 20px;
                height: 120px;
                text-align: center;
                font-size: 24px;
                font-weight: bold;
            }
        }
    }

}
</style>